<template>
  <div>
    <div class="select_top">
      <el-select v-model="codeflag" placeholder="工资类型" clearable @change="changeflag">
        <el-option
          v-for="item in wageType"
          :key="item.hash.code_id"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        ></el-option>
      </el-select>
      <el-select v-model="wdate" style="margin:0 10px" placeholder="日期"
        :disabled="codeflag==''"
      >
        <el-option
          v-for="item in wdateList"
          :key="item.hash.wdate"
          :label="item.hash.wdate"
          :value="item.hash.wdate"
        ></el-option>
      </el-select>
      <el-select v-model="wstatus" style="margin:0 10px" placeholder="发布状态" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button size="mini" @click="gettableList" type="primary">查询</el-button>
      <div style="float:right">
        <el-button size="mini" type="primary" @click="shengcheng">生成</el-button>
        <el-button size="mini" type="primary" @click="dodaoru">导入</el-button>
        <el-button size="mini" type="primary" @click="daochu">导出</el-button>
      </div>

    </div>
    <wagelist :tableList="tableList" :headList="headList" v-if="alive" id="tableexcel2"></wagelist>
    <el-dialog
      title="生成工资"
      :visible.sync="showUint2"
      width="40%"
    >
      <el-form labelWidth="150px">
        <el-form-item label="工资类型" class="is-required">
          <el-select v-model="codeflag2" placeholder="工资类型" clearable @change="changeflag2"
            style="width:100%"
          >
            <el-option
              v-for="item in wageType"
              :key="item.hash.code_id"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="参照日期" class="is-required">
          <el-select v-model="wdate2" placeholder="参照日期" style="width:100%"
            :disabled="codeflag2==''"
          >
            <el-option
              v-for="item in wdateList2"
              :key="item.hash.wdate"
              :label="item.hash.wdate"
              :value="item.hash.wdate"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生成日期" class="is-required">
          <el-date-picker
            :disabled="codeflag2==''&&codeflag2==''"
            style="width:100%"
            clearable
            placeholder="生成日期"
            v-model="wdate3"
            type="date"
            :pickerOptions="pickerOptions"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showUint2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="docreate">生 成</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="导入工资"
      :visible.sync="showin"
      width="40%"
    >
      <el-form labelWidth="150px">
        <el-form-item label="工资类型" class="is-required">
          <el-select v-model="codeflag3" placeholder="工资类型" clearable @change="changeflag2"
            style="width:100%"
          >
            <el-option
              v-for="item in wageType"
              :key="item.hash.code_id"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="日期" class="is-required">
          <el-date-picker
            style="width:100%"
            clearable
            placeholder="生成日期"
            v-model="wdate4"
            type="date"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <!-- {{fileList}} -->
        <el-form-item label="选择文件" class="is-required">
          <upload
            tn="img1"
            localfiletype="02"
            :imagefile="this.filedata"
            :isupload="1"
          >选择文件</upload>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showin = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="daoru">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import upload from '~/components/common/upload.vue';
import wagelist from '~/components/list/wageList.vue';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      filedata: {
        img1: '',
      },
      orderlist: [],
      neworderlist: [],
      ts: this.newStore(),
      swage: '',
      alive: true,
      showUint2: false,
      codeflag: '',
      showin: false,
      wdate: '',
      worgname: '',
      wdateList: [],
      wdateList2: [],
      wstatus: '',
      uname: '',
      codeflag2: '',
      codeflag3: '',
      wdate2: '',
      wdate3: '',
      wdate4: '',
      options: [{
        value: '0',
        label: '未发布',
      }, {
        value: '1',
        label: '已发布',
      }],
      wageType: [],
      tableList: [],
      headList: [],
      tableCopyTableList: [],
      fileList: [],
      pickerOptions: {
        // 1551398400000
        // 1575820800000
        disabledDate: (time) => {
          const da = new Date(`${this.wdate2} 00:00:00`).getTime();
          if (da == time.getTime()) {
            return true;
          }
          return false;
        },
      },
    };
  },
  components: {
    wagelist,
    upload,
  },
  created() {
    this.getwageType();
    // this.gettableList();
  },

  methods: {
    dodaoru() {
      this.showin = true;
      this.filedata = { img1: '' };
    },
    daochu() {
      if (this.tableList.length == 0) {
        this.$message({
          type: 'error',
          message: '导出数据为空,无法导出',
        });
        return false;
      }
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(document.querySelector('#tableexcel2'));
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.swage + this.wdate}.xlsx`);
      } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout); }
      return wbout;
    },
    daoru() {
      if (this.codeflag3 == '') {
        this.$message({
          type: 'error',
          message: '请先选择工资类型',
        });
        return;
      }
      if (this.wdate4 == '') {
        this.$message({
          type: 'error',
          message: '请先选择日期',
        });
        return;
      }
      if (this.filedata.img1 == '') {
        this.$message({
          type: 'error',
          message: '请上传文件',
        });
        return;
      }
      const req = {
        handle: '5A4A3E4E20E0D8E994D6836948462DFB0CBF5B3DF898636D6A677D1C1AAE06F9',
        inputfile: this.filedata.img1,
        wcodeflag: this.codeflag3,
        wdate: this.wdate4,
      };
      this.$confirm('确定导入工资?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          console.log(ts.d);
          this.$message({
            type: 'success',
            message: '导入成功',
          });
          this.codeflag = this.codeflag3;
          this.wdate = this.wdate4;

          this.gettableList();
          this.showin = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    shengcheng() {
      this.wdate2 = '';
      this.wdate3 = '';
      this.codeflag2 = '';
      this.showUint2 = true;
    },
    docreate() {
      if (this.codeflag2 == '') {
        this.$message({
          type: 'error',
          message: '请先选择工资类型',
        });
        return;
      }
      if (this.wdate2 == '') {
        this.$message({
          type: 'error',
          message: '请先选择参考日期',
        });
        return;
      }
      if (this.wdate3 == '') {
        this.$message({
          type: 'error',
          message: '请先选择生成日期',
        });
        return;
      }
      const req = {
        handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE08A563EB9BEBBA515DD5E4717A183FCE4',
        olddate: this.wdate2,
        newdate: this.wdate3,
        codeflag: this.codeflag2,
      };
      this.$confirm('确定生成工资?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          console.log(ts.d);
          this.$message({
            type: 'success',
            message: '生成成功',
          });
          this.changeflag(this.codeflag2);
          this.codeflag = this.codeflag2;
          this.wdate = this.wdate3;
          this.gettableList();
          this.showUint2 = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    changeflag2(val) {
      this.wdate2 = '';
      const req = {
        handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE0D12821C7AB79A383C85F6131D883C036A4FAC5F547223AE6',
        wcodeflag: val,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wdateList2 = ts.d.data.operation1;
      });
    },
    changeflag(val) {
      console.log(val);
      this.swage = '';
      for (let i = 0; i < this.wageType.length; i += 1) {
        if (val == this.wageType[i].hash.code_id) {
          this.swage = this.wageType[i].hash.code_name;
        }
      }

      this.wdate = '';
      this.tableList = [];
      this.reload();
      const req = {
        handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE0D12821C7AB79A383C85F6131D883C036A4FAC5F547223AE6',
        wcodeflag: val,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wdateList = ts.d.data.operation1;
      });
    },
    reload() {
      this.alive = false;
      this.$nextTick(() => {
        this.alive = true;
      });
    },
    // 获取工资类型
    getwageType() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '1',
        codetype: '02',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.wageType = ts.d.data.operation1;
      });
    },

    getorderList() {
      this.neworderlist = [];
      const req = {
        handle: '5A4A3E4E20E0D8E9DF4D9F70BB944481169301F78074E09AB67592DEC25DEC83',
        codeflag: this.codeflag,
        query: '',
        start: '0',
        limit: '1000000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d);
        this.orderlist = ts.d.data.operation1;
        for (let i = 0; i < this.orderlist.length; i += 1) {
          this.headList.push(this.orderlist[i].hash.codename);
        }
      });
    },
    // 获取工资列表
    gettableList() {
      this.headList = [];
      if (this.codeflag == '') {
        this.$message({
          type: 'error',
          message: '请先选择工资类型',
        });
        return;
      }
      if (this.wdate == '') {
        this.$message({
          type: 'error',
          message: '请先选择日期',
        });
        return;
      }

      const req = {
        handle:
          '5A4A3E4E20E0D8E9DF4D9F70BB944481CBA5FDB6D7C6913509D8A72CF4F6A23E6B1DD5DC9EAAD578',
        wcodeflag: this.codeflag,
        wdate: this.wdate,
        wstatus: this.wstatus,
        worgname: '',
        uname: '',
      };
      this.spost(this.ts, '/mainservlet', req)
        .then((ts) => {
          this.tableList = ts.d.data.operation1;

          const req1 = {
            handle: '5A4A3E4E20E0D8E9F649FA99F50A3FE0D066FF5E6CBBF3F214D6ED002B02A0EC',
            wcodeflag: this.codeflag,
            wdate: this.wdate,
            query: '',
            start: '0',
            limit: '1000000',
          };
          this.spost(this.ts, '/mainservlet', req1).then((ts1) => {
            this.orderlist = ts1.d.data.operation1;
            for (let i = 0; i < this.orderlist.length; i += 1) {
              this.headList.push(this.orderlist[i].hash.codename);
            }

            if (this.tableList.length > 0) {
              for (let j = 0; j < this.headList.length; j += 1) {
                let tused = false;

                for (const key in this.tableList[0].hash) {
                  if (
                    key != 'id' &&
                  key != 'uid' &&
                  key != 'uname' &&
                  key != 'wdate' &&
                  key != 'worgname' &&
                  key != 'worgid' &&
                  key != 'wstatus'
                  ) {
                    if (key == this.headList[j]) {
                      tused = true;
                      break;
                    }
                  }
                }

                if (tused == false) {
                  this.headList.splice(j, 1);
                  j -= 1;
                }
              }
            }
            this.reload();
          });
        });
    },
  },
};
</script>
